12. 디버깅 및 도구
CSS를 작성할 때 발생할 수 있는 문제를 해결하고, 스타일을 개선하는 데 도움이 되는 다양한 디버깅 도구가 있습니다. 특히 브라우저 개발자 도구는 실시간으로 CSS 스타일을 분석하고 수정하는 데 유용한 도구입니다. 이 섹션에서는 브라우저 개발자 도구 사용법과 흔히 발생하는 문제 및 해결 방법을 다룹니다.
12.1 브라우저 개발자 도구 사용법
브라우저 개발자 도구는 웹 페이지의 HTML, CSS, JavaScript를 실시간으로 수정하고, 레이아웃 문제를 디버깅할 수 있는 강력한 기능을 제공합니다. 주요 브라우저(Chrome, Firefox, Safari 등) 모두 개발자 도구를 기본적으로 제공합니다.
12.1.1 개발자 도구 열기
- Chrome 및 Firefox:
F12
키 또는Ctrl + Shift + I
(Windows) /Cmd + Option + I
(Mac)을 눌러 개발자 도구를 열 수 있습니다. - Safari: 개발자 모드를 활성화한 후,
Cmd + Option + I
로 개발자 도구를 열 수 있습니다.